<!-- 分配记录 -->
<template>
  <div>
    <ul class="total-msg flex">
      <li
        v-for="(item, index) in countData"
        :key="index"
        @click="checkFun(item.key, item.num)"
        :class="['hand', { line: item.lineFlag == true }, { selected: checkParams == item.key }]">
        <p class="value">{{ topCountData[item.key] }}</p>
        <p class="name">{{ item.name }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
  import columnOpt from '../opt/topCountOpt'
  export default {
    props: {
      customerType: {
        type: Number,
        default: null
      },
      topCountData: {
        type: Object,
        default: null
      }
    },
    components: {},
    data() {
      return {
        countData: [],
        checkParams: ''
      }
    },
    // watch: {
    //   topCountData(val) {
    //     this.topCountData = val
    //   }
    // },
    created() {},
    mounted() {
      const unwatch = this.$watch('topCountData', function (val) {
        if (this.customerType == 3) {
          this.countData = columnOpt.options3(this)
          if (this.$route.query.fromPage == 'publicClue') {
            if (this.$route.query.fromKey == 'leaveCaseCustomer') {
              this.checkFun('leaveUserClueSum', 3)
            } else if (this.$route.query.fromKey == 'invalidCustomer') {
              this.checkFun('invalidClueSum', 5)
            } else {
              this.checkFun(this.countData[0].key, this.countData[0].num)
            }
          } else {
            if (this.$route.query.fromKey == 'leaveCaseVisitCustomer') {
              this.checkFun('leaveUserVisitSum', 2)
            } else if (this.$route.query.fromKey == 'leaveCaseDealCustomer') {
              this.checkFun('leaveUserDealSum', 1)
            } else if (this.$route.query.fromKey == 'invalidCustomer') {
              this.checkFun('invalidVisitSum', 4)
            } else {
              this.checkFun(this.countData[0].key, this.countData[0].num)
            }
          }
        } else {
          if (this.customerType == 1) {
            this.countData = columnOpt.options1(this)
          } else if (this.customerType == 2) {
            this.countData = columnOpt.options2(this)
          }

          if (this.$route.query.fromKey) {
            let current = this.countData.find((item) => {
              return item.key == this.$route.query.fromKey
            })
            if (current) {
              this.checkFun(current.key, current.num)
            } else {
              this.checkFun(this.countData[0].key, this.countData[0].num)
            }
          } else {
            this.checkFun(this.countData[0].key, this.countData[0].num)
          }
        }

        // 处理业务逻辑
        // 之后调用unwatch, 取消监听
        unwatch()
      })

      console.log(this.topCountData, 'top1111')
    },
    methods: {
      checkFun(params, num) {
        if (this.checkParams == params) {
          this.checkParams = ''
        } else {
          this.checkParams = params
        }

        let obj = {
          params,
          num
        }
        console.log(obj, 'bbbbbbbbjo')
        this.$emit('countChange', obj)
        // this.$refs.table.fetch(true)
      }
    }
  }
</script>
<style lang="scss" scoped>
  .line {
    padding-right: 20px;
    border-right: 1px #dcdee2 solid;
  }

  .total-msg {
    margin-bottom: 10px;

    li {
      margin-right: 30px;

      .name {
        color: #666;
      }

      .value {
        font-size: 24px;
        margin-bottom: 10px;
        color: #222;
        font-weight: bold;
        text-align: center;
      }
    }

    .selected {
      .name {
        color: #2d8cf0;
      }

      .value {
        color: #2d8cf0;
      }
    }
  }
</style>
